import React, { PureComponent } from 'react'
import * as _ from 'lodash'
import PropTypes from 'prop-types'
import styles from './HeZuo.css'

const hz01 = require('../assets/hezuo/hezuo01.png')
const hz03 = require('../assets/hezuo/hezuo03.png')
const hz04 = require('../assets/hezuo/hezuo04.png')
const hz05 = require('../assets/hezuo/hezuo05.png')
const hz06 = require('../assets/hezuo/hezuo06.png')
const hz07 = require('../assets/hezuo/hezuo07.png')
const hz08 = require('../assets/hezuo/hezuo08.png')


export default class extends PureComponent {
  static propTypes = {
    brands: PropTypes.any
  }

  static defaultProps = {
    brands: [hz01,hz03,hz04,hz05,hz06,hz07,hz08]
  }

  renderCell = (v, i ) => {
    return (
      <div key={i} className={styles.cell}>
        <img src={v} />
      </div>
    )
  }

  render() {
    const { brands } = this.props;
    console.log('brands is ', brands)
    return (
      <div id="hezuo" className={styles.container}>
        <div className={styles.tip}>合作单位</div>
        <div className={styles.content}>
        {
          _.map(brands, (v, i) => {
            return this.renderCell(v, i)
          })
        }
        </div>
      </div>
    )
  }
}
